Babel 入門：用 Babel 轉換太潮的 JavaScript

很多舊的瀏覽器不支援比較新的 JavaScript 語法，透過 Babel 這套工具可以幫我們把新的 JavaScript 語法轉換成舊的瀏覽器可以支援的語法。

BABEL 官方連結：https://babeljs.io/

使用方法

確認有安裝 node.js，並使用在終端輸入 npm init 來初始化，建立 package.json 資料夾

安裝 babel 核心套件

npm install --save-dev @babel/core @babel/cli

安裝完之後可以看到 package.json 檔案內會自動增加兩個 devDependencies

{
  "name": "babel_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.11.6",
    "@babel/core": "^7.11.6"
  }
}

在 package.json 的 script 內增加 babel 指令，src 是要編譯的檔案放的資料夾，-d 是 destination 的意思，就是編譯完後檔案要放在 lib 這個資料夾

"scripts": {
    "build": "babel src -d lib",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

安裝設定檔

npm install @babel/preset-env --save-dev

在根目錄新增 .babelrc 設定檔，預設會轉換 ES2015+ 的語法

{
  "presets": ["@babel/preset-env"]
}

也可以安裝其他 plugin，例如可以轉換實驗語法等

https://babeljs.io/docs/en/plugins/

為了測試，我們建立一個有 ES6 語法的檔案 test.js 在剛才的 src 資料夾

const a = 1;
const b = [1, 2, 3, 4];
const c = [...b];
for (let i of c) {
    console.log(i);
}

執行編譯

npm run build

編譯結果會在 lib 資料夾內

"use strict";

function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

var a = 1;
var b = [1, 2, 3, 4];
var c = [].concat(b);

var _iterator = _createForOfIteratorHelper(c),
    _step;

try {
  for (_iterator.s(); !(_step = _iterator.n()).done;) {
    var i = _step.value;
    console.log(i);
  }
} catch (err) {
  _iterator.e(err);
} finally {
  _iterator.f();
}